<template>
    <div class="category-index">
        <div class="add">
            <el-button @click="addRecord" type="primary">新增</el-button>
        </div>
        <el-table row-key="id" border lazy :load="load"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :data="dataList" table-layout="auto"
            class="table">
            <el-table-column prop="id" label="Id" align="center">
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="center">
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.active_flag" @click="changeFlag(scope.row)" active-color="#409EFF"
                        inactive-color="#F56C6C">
                    </el-switch>
                    <el-button class="edit" type="danger" size="small" @click="deleteItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-form>
            <el-dialog v-model="dialog" title="新增分类" width="500">
                <el-form :model="form" ref="formRef" label-width="90px" label-position="left">
                    <el-form-item label="分类名:" prop="name" :rules="[
                    {
                        required: true,
                        message: '请输入分类名',
                        trigger: 'blur'
                    },
                    {
                        min: 2, max: 20, message: '长度至少为2,长度最大为20', trigger: 'blur'
                    }]">
                        <el-input v-model="form.name" placeholder="请输入分类名" class="userName-input" />
                    </el-form-item>
                    <el-form-item label="父分类:" prop="name" :rules="[
                    {
                        required: true,
                        message: '请选择父分类',
                        trigger: 'blur'
                    }]">
                        <el-cascader v-model="form.pid" placeholder="请选择分类" :props="props" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialog = false">取消</el-button>
                        <el-button type="primary" @click="SubmitAddCategory(formRef)">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { list, edit, add } from '@/api/category'
import { onMounted, reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()


const page = reactive<{
    page: Number,
    limit: Number
    pid: Number
}>({
    page: 0,
    limit: 20,
    pid: 0
})



const dialog = ref();

const load =async (
  row: any,
  treeNode: unknown,
  resolve: (date: any[]) => void
) => {
    
    console.log("r",row)

    page.pid = row.id;

    let listData  = await list(page);

    resolve(listData.list)
}


var form = reactive<{
    name: String,
    pid: Number
}>({ name: "", pid: 0 })

const props = {
    lazy: true,
    async lazyLoad(node: any, resolve: any) {

        page.pid = node.value||0;

        let listData = await list(page);
    
        listData = listData.list;

        let propList = new Array

        for (const item of listData) {

            var itm: any = item;

            var label = itm.name;

            var value = itm.id;

            var leaf =!itm.hasChildren;

            console.log("us",leaf)

            propList.push({ label, value, leaf })

        }

        console.log("p",propList)

        resolve(propList)

        // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
        // resolve(nodes)
    }
}


const dataList = ref([]);

const propsData = ref([]);

const parentList: any = ref([]);

const optionsList = async () => {

    page.pid = 0;

    let result = await list(page);

    parentList.value = result.list;



}

const addRecord = async () => {
    await optionsList()
    dialog.value = true
}

const SubmitAddCategory = (formRef: FormInstance | undefined) => {

    if (!formRef) return
    formRef.validate(async (valid) => {
        if (valid) {

            await add(form);

            list(page)

        } else {

            return false

        }
    })

}

const changeFlag = async (item: any) => {

    const active_flag = item.active_flag ? 1 : 0;

    const id = item.id;

    const deleted = item.deleted;

    await edit([{ activeFlag: active_flag, id, deleted }])

    listData()

}

const deleteItem = async (item: any) => {

    const active_flag = item.active_flag

    const id = item.id;

    const deleted = item.deleted;

    await edit([{ activeFlag: active_flag, id, deleted: 0 }])

    await listData()

}

const listData = async () => {

    let result = await list(page)

    let data = result.list;

    let array: any = [];

    for (var item of data) {

        array.push({ ...item, active_flag: !!item.active_flag })

    }

    dataList.value = array

    propsData.value = array

    return array

}

onMounted(async () => {

    listData()


})

</script>
<style scoped>
.edit {
    margin-left: 20px;
}

.table {
    margin: 20px 0 10px 0;
    border-bottom: 1px solid #f7f7f7;
    border-top: 1px solid #f7f7f7;
}
</style>